<template>
  <div class="parent-container">
    <!-- 固定在头部的子元素 -->
    <div class="sticky-header">这是固定在头部的子元素</div>
    <!-- 模拟大量内容 -->
    <div v-for="i in 50" :key="i">{{ i }}</div>
  </div>
</template>

<script setup>
// 这里不需要额外的 JavaScript 逻辑
</script>

<style scoped>
.parent-container {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
  z-index: 1;
}
</style>